<template>

  <div class="myMenu">
      <div style="color: white;margin: 20px">萤火商城2.0</div>
    <el-row class="tac" >
      <el-col :span="12">
        <el-menu
            :default-active="activeRoute"
            :router="true"
            active-text-color="white"
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="transparent"
            v-for="(item,index) in MenuList"
        >
          <el-menu-item :index="item.path">
            <el-icon class="iconColor"><component :is="item.icon"></component></el-icon>
            <span style="color: white">{{item.title}}</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import {computed, ref} from "vue"
import {useRoute} from 'vue-router'
const route=useRoute()
let test=ref("settiing")
let MenuList=ref([
  {title:'首页',icon:'HomeFilled',path: ''},
  {title: '管理员',icon: 'Avatar',path:'/admin/user'},
  {title: '店铺管理',icon: 'Shop',path: ''},
  {title: '商品管理',icon: 'Briefcase',path: '/admin/goods'},
  {title: '订单管理',icon: 'Goods',path: ''},
  {title: '会员管理',icon: 'UserFilled',path: ''},
  {title: '内容管理',icon: 'Tickets',path: ''},
  {title: '营销管理',icon: 'Connection',path: ''},
  {title: '数据统计',icon: 'Histogram',path: ''},
  {title: '客户端',icon: 'Link',path: ''},
  {title: '设置',icon: 'Setting',path: ''},
])
const activeRoute=computed(()=>{
  const {meta,path}=route
   if(meta.activeMenu){
     return meta.activeMenu
   }
   return path
})
</script>

<style scoped>
.myMenu{
  width: 160px;
  position: fixed;
  top: 0;
  bottom: 0;
  background-color: #001529;
}
.iconColor{
  color: white;
}
.el-menu-vertical-demo{
  width: 160px;
  border: none;
}
.el-menu-item.is-active{
  background-color: #1890ff !important;
}
</style>
